<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>修改教师</title>
</head>

<body>
<div id="app">
    <main class="container">
        <form style="margin-top: 32px">
            <fieldset>
                <label>
					姓名
					<input name="name" v-model="name" />
				</label>
				<label>
					工号
					<input name="code" v-model="code" />
				</label>
				<label>
					密码
					<input name="password" type="password" v-model="password"/>
				</label>
				<label>
					备注
					<input name="remark" v-model="remark" />
				</label>

				<!-- 学院列表供选择： 显示学院名称，取得选中学院的id -->
				<label>
					学院
					<select v-model="collegeId">
						<option v-for="(item, index) in colleges" :value="item.id"> {{ item.name }}</option>
					</select>
				</label>				
            </fieldset>

            <button @click.prevent="doUpdate" :disabled="!canClick">修改</button>
            <div style="color: rgb(0, 137, 90); display: inline-block; margin-left: 24px" v-if="displaySuccess">
                操作成功，即将返回
            </div>
        </form>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                id: null,
				name: "",
				code: "",
				password: "",
				collegeId: null,
				remark: "",

				colleges: [],								// 取回学院列表，并显示学院名称在select列表，选中某一项后，记录下学院的id	

                canClick: false,							// 访问后端过程中，按钮不可用
                displaySuccess: false,                      // 操作成功后显示提示信息
            };
        },

        methods: {
            init() {
                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const id = urlParams.get('id');

                this.canClick = false;
                const vueInstance = this;
                let finishedTasks = 0;						// 既要取得要修改的记录，还要取得学院列表

                if(id == null ) {
                    console.log("URL中没有id： ", window.location.href);
                }
                else {
                    // 取得当前要修改的记录
                    const url = "/teachers/" + id;
                    axios.get(url).then(function(response) {
                        console.log("响应的状态码：", response.status);
                        console.log("响应的数据：", JSON.stringify(response.data));

                        vueInstance.canClick = true;

                        if(response.status == 200 && response.data != null 
                            && response.data.code === 200 && response.data.data.rows != null) {
                        	vueInstance.id = response.data.data.rows[0].teacher.id;
                            vueInstance.name = response.data.data.rows[0].teacher.name;                            
                            vueInstance.code = response.data.data.rows[0].teacher.code;
                            vueInstance.password = response.data.data.rows[0].teacher.password;
                            vueInstance.collegeId = response.data.data.rows[0].teacher.collegeId;
                            vueInstance.remark = response.data.data.rows[0].teacher.remark;

                            finishedTasks++;
                            if(finishedTasks == 2) {
                            	vueInstance.canClick = true;
                            }
                        }
                        else {
                            console.log("后端代码出错了，检查后端log");
                        }
                    })
                    .catch(function (error) {
                        vueInstance.canClick = true;

                        console.log("访问出错了：", error);
                        console.log("地址：", url);
                    });
                }

                // 取得学院列表，显示在select的选项中
                const url = "/colleges";
				axios.get(url).then(function(response) {
					console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

					if(response.status == 200 && response.data != null 
						&& response.data.code === 200 && response.data.data.rows != null) {
						vueInstance.colleges = response.data.data.rows;

						finishedTasks++;
                        if(finishedTasks == 2) {
                        	vueInstance.canClick = true;
                        }
					}
					else {
						console.log("后端代码出错了，检查后端log");
					}
				})
				.catch(function (error) {
					console.log("访问出错了：", error);
                    console.log("地址：", url);
				});
            },

            doUpdate() {
                const url = "/teachers";
                const formData = {
                	id: this.id,
                    name: this.name,
                    code: this.code,
                    password: this.password,
                    remark: this.remark,

                    collegeId: this.collegeId,
                };

                this.canClick = false;
                let vueInstance = this;

                axios.put(url, formData).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if(response.status == 200 && response.data != null && response.data.code === 200) {
                        vueInstance.displaySuccess = true;

                        window.setTimeout(() => {
                            window.location.href = "/teacher-list.html";
                        }, 1000);
                    }
                    else {
                        console.log("后端代码出错了，检查后端log");
                    }
                })
                .catch(function (error) {
                    console.log("访问出错了：", error);
                    console.log("地址：", url);
                    console.log("数据：", formData);
                });
            }
        },
        mounted() {
            this.init();
        }
    };

    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>